<script setup lang="ts">
import {getJobDetailsService, PostJOBService, CheckJOBService, FavorJOBService} from "@/api/job.js";
import {useUserInfoStore} from "@/stores/userInfo.js";
import {useTokenStore} from '@/stores/token.js'
import {getUserInfoService} from "@/api/user.js";
import { ElMessage } from 'element-plus'
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const jobId = route.params.jobId;

const isFavorited = ref(false)
const status = ref(0);
const jobFetched = ref(false);
const jobFetched1 = ref(false);
const userInfoStore = useUserInfoStore();
//获取用户信息
const userInfo = ref({})
const userId = ref(0)
async function getUserInfo(){
  let res = await getUserInfoService()
  userInfo.value = res.data
  userId.value = userInfo.value.id
}

getUserInfo();



const jobDetails = ref({
  jobId: 'J001',
  location: '上海',
  hr: '张三',
  tags: '前端, JavaScript, Vue.js',
  name: '前端开发工程师',
  salary: '15k-25k',
  companyName: '科技有限公司',
  description: '岗位要求:\n' +
      '计算机及相关专业，大学本科以上学历，5 年以上开发经验\n' +
      '1.精通java 语法，理解jvm 的工作原理以及一定的调优能力，熟练使用 Mysql 数据库并有一定的调优能力\n' +
      '2.能够承担起重要模块功能的开发，有良好的代码编写习惯，能输出标准的技术文档\n' +
      '3，能够熟练使用主流的框架技术，例如 springcloud，nacos，dubbo，sentinal 等，并能够合理运用项目中\n' +
      '4.熟练使用常用缓存框架-redis，熟练使用常用的消息中间件-kafka:\n' +
      '5.性格积极向上，抗压能力强，有供应链开发经验的优先，有过公有云使用部署经验优先:\n' +
      '6.需要掌握常用的开发工具，如git，maven，idea等，有良好的绘图习惯;\n' +
      '岗位要求：[\'Java\', \'SpringCloud\', \'MySQL\', \'微服务架构\']\n' +
      '岗位福利：[\'五险一金\', \'全勤奖\', \'年终奖\', \'带薪年假\', \'员工旅游\', \'餐补\', \'交通补助\', \'节日福利\']',
  workRole: '系统架构师,开发者',
  workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
  workField: '海外信贷业务系统开发',
  workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
});

const companyDetails = ref({
  name:'',
  companyId:'',
  phone:'',
  introduction:'',
  status:'',
  size:'',
  address:'',
  companyType:''
})

async function getJobDetails(){
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
  jobFetched.value = true;

  let result2 = await CheckJOBService(userId.value, jobDetails.value.jobId, companyDetails.value.companyId)
  status.value = result2.data.status;
  if(result2.data.myFavorId !== null)
    isFavorited.value = true;
}

getJobDetails()

//投递简历功能
async function handleClick() {
  if (!jobFetched.value) {
    await getJobDetails();
  }

  if (status.value === 0 || status.value === null) {
    PostJOB(userId.value, jobDetails.value.jobId, companyDetails.value.companyId);
  }
}

async function PostJOB(userId, jodId, companyId){
  console.log("userId:",userId, "jodId:", jodId, "companyId:", companyId);
  await PostJOBService(userId, jodId, companyId);
  status.value = 1;
  ElMessage.success("投递简历成功");
}

//用户收藏职位功能
async function onFavorite() {
  isFavorited.value = !isFavorited.value;

  if (!jobFetched.value) {
    await getJobDetails();
  }

  if (isFavorited.value === true) {
    // 调用收藏的逻辑
    FavorJOB(userId.value, jobDetails.value.jobId, companyDetails.value.companyId, 1);
  } else {
    // 调用取消收藏的逻辑
    FavorJOB(userId.value, jobDetails.value.jobId, companyDetails.value.companyId, 0);
  }
}

//收藏职位
async function FavorJOB(userId, jodId, companyId, sss){
  await FavorJOBService(userId, jodId, companyId, sss);
  if(sss === 1)
    ElMessage.success("收藏成功");
  if(sss === 0)
    ElMessage.success("取消收藏");
}

const viewDetails = (companyId)=>{
  router.push(`/CompanyDetails/${companyId}`)
}

</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>职位细节</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>
          <li class="active">职位细节</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Job Details Area -->
  <section class="job-details-area ptb-100">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">

          <div class="hot-jobs-list">
            <div class="row align-items-center">


              <div class="job_details">

                  <div>
                    <h3><strong>职位：</strong>{{jobDetails.name || '暂无信息'}}</h3>
                    <p><strong>公司名：</strong>{{companyDetails.name || '暂无信息'}}</p>
                  </div>
                  <div>
                    <p><strong>薪资：</strong>{{jobDetails.salary || '暂无信息'}}</p>
                  </div>

              </div>

              <div class="col-lg-4 job_action_button_group_pre">
                <div class="hot-jobs-btn job_action_button_group">
                  <button class="job_action_button job_action_button_favorite" :class="{ 'default-btn': true, 'active': isFavorited}"
                          @click="onFavorite">
                    {{ isFavorited===true ? '已收藏' : '去收藏' }}</button>
                  <button class="job_action_button job_action_button_resume" :class="{ 'default-btn': true, 'disabled-btn': status === 1 }"
                          @click="handleClick">{{ status === 0 || status === null ? '投简历' : '已投递' }}</button>

                </div>
              </div>


            </div>
          </div>

          <div class="job-details-content job-details-analyze">
            <h3>关键信息提取分析</h3>

            <div class="work-role">
              <strong>岗位角色:</strong> {{ jobDetails.workRole.split(',').join(' / ') }}
            </div>

            <div class="work-requirements">
              <strong>技能要求:</strong> {{ jobDetails.workRequirements.split(',').join(' / ') }}
            </div>

            <div class="work-field">
              <strong>工作领域:</strong> {{ jobDetails.workField }}
            </div>

            <div class="work-experience">
              <strong>工作经验:</strong> {{ jobDetails.workExperience }}
            </div>
          </div>

          <div class="job-details-content">

            <div class="tag-list">
              <span
                  v-for="(tag, index) in jobDetails.tags.split(',')" :key="index"
                  class="tag-item"
              >
                {{ tag.trim() }}
              </span>
            </div>

            <h3>职位描述</h3>
            <span v-if="jobDetails.description" class="preserve-newlines">{{jobDetails.description}}</span>
            <p v-else>无职位描述</p>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="job-details-sidebar">
            <div class="job-widget">
              <h3>HR</h3>
              <ul class="social-icon">
                <li><span>{{ jobDetails.hr || '暂无信息' }}</span></li>
              </ul>
            </div>

            <div class="job-widget">
              <h3>公司情况</h3>

              <ul class="overview">
                <li>公司名：<span>{{ companyDetails.name || '暂无信息' }}</span></li>
                <li>公司地址：<span>{{ jobDetails.location || '暂无信息' }}</span></li>
                <li>公司规模：<span>{{ companyDetails.size || '暂无信息' }}</span></li>
                <li>融资情况：<span>{{ companyDetails.status || '暂无信息' }}</span></li>
                <li>公司描述：<span>{{ companyDetails.introduction.substring(0,15) || '暂无信息' }}</span></li>
                <div class="job_actions">
                  <button class="job_action_button job_action_button_details" @click="viewDetails(companyDetails.companyId)">详情</button>
                </div><br/><br/>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Job Details Area -->

  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";


.job_details{
  margin-left: 20px;
}

.job_action_button_group_pre {
  display: flex; /* 已经是Flex布局 */
  justify-content: flex-end; /* 添加这一行以实现靠右对齐 */
  align-items: center; /* 保持垂直居中对齐 */
  margin-left: 60%;
}

.job_action_button_group {
  display: flex; /* 已经是Flex布局 */
  justify-content: flex-end; /* 添加这一行以实现靠右对齐 */
  align-items: center; /* 保持垂直居中对齐 */
  gap: 10px; /* 按钮之间的间距，可选，根据需要调整 */
  width: 200px;
}

.preserve-newlines {
  white-space: pre-wrap;
}

.job_action_button {
  background-color: #4CAF50; /* 默认按钮背景色 */
  border: none;
  color: white;
  padding: 5px 5px; /* 调整内边距以缩小宽度 */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px; /* 字体大小也可以适当减小 */
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s;
  width: 100px;
  height: 35px;
}

.job_action_button:hover {
  opacity: 0.8;
}

.job_action_button_favorite {
  background-color: #FF9800; /* 收藏按钮颜色 */
  margin-right: 10px;
}

.job_actions {
  display: flex;
  justify-content: flex-end; /* 收藏和投简历靠右对齐 */
  margin-top: 10px; /* 与上一元素的间距 */
  margin-bottom: 20px;
  position: relative; /* 用于绝对定位中间的按钮 */
}


.job_action_button_favorite {
  background-color: #FF9800; /* 收藏按钮颜色 */
  margin-right: 10px;
}

.job_action_button_favorite:hover {
  background-color: #FFA726; /* 收藏按钮悬停颜色 */
}

.job_action_button_favorite:active {
  background-color: #FFB74D; /* 收藏按钮点击颜色 */
}

.job_action_button_resume {
  background-color: #2196F3; /* 投简历按钮颜色 */
}

.job_action_button_resume:hover {
  background-color: #42A5F5; /* 投简历按钮悬停颜色 */
}

.job_action_button_resume:active {
  background-color: #62B1FF; /* 投简历按钮点击颜色 */
}

/* 居中对齐的查看详情按钮 */
.job_action_button_details {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #9C27B0; /* 查看详情按钮颜色 */
  margin-top: 10px; /* 调整与上方元素的间距 */
}

.job_action_button_details:hover {
  background-color: #BA68C8; /* 查看详情按钮悬停颜色 */
}

.job_action_button_details:active {
  background-color: #E1BEE7; /* 查看详情按钮点击颜色 */
}


.tag-list {
  display: flex;
  flex-wrap: wrap; /* 允许多行显示，如果需要 */
  gap: 5px; /* 标签间的间距 */
  margin-bottom: 20px;
}

.tag-item {
  background-color: #f1f1f1; /* 标签背景色 */
  color: #333; /* 文字颜色 */
  padding: 5px 10px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  font-size: 14px; /* 文字大小 */
  line-height: 1; /* 保证文本垂直居中 */
  white-space: nowrap; /* 防止文本换行 */
  cursor: default; /* 鼠标指针样式 */
}

.job-details-analyze {
  margin-bottom: 20px;
}

.job-details-analyze div {
  margin-bottom: 10px;
}

strong {
  font-weight: bold;
  color: #333;
}

.work-role, .work-requirements, .work-field, .work-experience {
  color: #666;
}
</style>